<template>
  <el-descriptions title="八卦详情表" direction="vertical" :column="2" border>
    <el-descriptions-item label="卦名">{{
      baguaInfo.guaName
    }}</el-descriptions-item>
    <el-descriptions-item label="卦象"
      ><img :src="baguaInfo.guaXiang" class="images"
    /></el-descriptions-item>
    <el-descriptions-item label="自然象征">{{
      baguaInfo.guaZiran
    }}</el-descriptions-item>
    <el-descriptions-item label="性情">{{
      baguaInfo.guaXingqing
    }}</el-descriptions-item>
    <el-descriptions-item label="家族关系">{{
      baguaInfo.guaJiazu
    }}</el-descriptions-item>
    <el-descriptions-item label="象征动物">{{
      baguaInfo.guaAnimal
    }}</el-descriptions-item>
    <el-descriptions-item label="象征五官">{{
      baguaInfo.guaWuguan
    }}</el-descriptions-item>
    <el-descriptions-item label="象征内脏">{{
      baguaInfo.guaNeizang
    }}</el-descriptions-item>
    <el-descriptions-item label="先天八卦方位">{{
      baguaInfo.guaXiantian
    }}</el-descriptions-item>
    <el-descriptions-item label="后天八卦方位">{{
      baguaInfo.guaHoutian
    }}</el-descriptions-item>
    <el-descriptions-item label="五行">{{
      baguaInfo.guaWuxing
    }}</el-descriptions-item>
    <el-descriptions-item label="二进制">{{
      baguaInfo.guaErjinzhi
    }}</el-descriptions-item>
    <el-descriptions-item label="Unicode编码">{{
      baguaInfo.guaBianma
    }}</el-descriptions-item>
    <el-descriptions-item label="属性">
      <el-tag size="small">{{ baguaInfo.guaProperty }}</el-tag>
    </el-descriptions-item>
  </el-descriptions>
</template>
<style>
.images {
  width: 10%;
  display: block;
}
</style>
<script>
import eightAPI from "@/api/core/gua/eight.js";
export default {
  data() {
    return {
      baguaInfo: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      eightAPI.getDataById(this.$route.params.id).then((response) => {
        this.baguaInfo = response.data.record;
        console.log(this.baguaInfo);
      });
    },
  },
};
</script>
